﻿<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Float-Admin</title>

        <!-- Common plugins -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/simple-line-icons.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/pace.css" rel="stylesheet"><link href="css/jasny-bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/nanoscroller.css">
        <link rel="stylesheet" href="css/metismenu.min.css">
        <link href="css/footable.core.css" rel="stylesheet">
        <!--template css-->
        <link href="css/style.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

   <!--top bar start-->
        <div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-6">
                        <a href="index.html" class="admin-logo">
                            <h1><img src="picture/logo-dark.png" alt=""></h1>
                        </a>
                        <div class="left-nav-toggle visible-xs visible-sm">
                            <a href="">
                                <i class="glyphicon glyphicon-menu-hamburger"></i>
                            </a>
                        </div><!--end nav toggle icon-->
                    </div>
                    <div class="col-xs-6">
                        <ul class="list-inline top-right-nav">
                            <li class="dropdown avtar-dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <img src="picture/avtar-1.jpg" class="img-circle" width="30" alt="">

                                </a>
                                <ul class="dropdown-menu top-dropdown">
                                    <li><a href="javascript: void(0);"><i class="icon-settings"></i> 设置</a></li>
                                    <li class="divider"></li>
                                    <li><a href="/admin/login/out"><i class="icon-logout"></i> 退出登录</a></li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- top bar end-->

        <!--left navigation start-->
        <aside class="float-navigation light-navigation">
            <div class="nano">
                <div class="nano-content">
                    <ul class="metisMenu nav" id="menu">
                        <li class="nav-heading"><span>Main Navigation</span></li>
                        <li class="active"><a href="javascript: void(0)"><i class="fa fa-diamond"></i>平台管理</a></li>
                        <!--<li><a href="landing/index.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
                    </ul>
                </div><!--nano content-->
            </div><!--nano scroll end-->
        </aside>
        <!--left navigation end-->


        <!--main content start-->
        <section class="main-content">



            <!--page header start-->
            <div class="page-header">
                <div class="row">
                    <div class="col-sm-6">
                        <h4>对接平台管理&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="addButton" data-toggle="modal" data-target="#signupModal" class="btn btn-sm btn-success">&nbsp;&nbsp;添&nbsp;&nbsp;加&nbsp;&nbsp;</button></h4>
                    </div>
                </div>
            </div>
            <!--page header end-->


            <!--start page content-->
            <div class="row">

                 <div class="col-md-12">
                    <div class="panel panel-default collapsed">
                        <div class="panel-heading">对接平台列表</div>
                        <div id="panel-body" class="panel-body">
                            <table class="footable table table-hover" data-page-size="2" data-filter=#filter>
                                <thead>
                                <tr>
                                    <th style="text-align: center">平台ID</th>
                                    <th style="text-align: center">平台密钥</th>
                                    <th style="text-align: center">token密钥</th>
                                    <th style="text-align: center">平台简介</th>
                                    <th style="text-align: center">通讯URL</th>
                                    <th style="text-align: center">平台负责人</th>
                                    <th style="text-align: center">负责人手机号</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="table_tbody">
                                    <% if(code == 0 && docs.item.length){ %>
                                        <%
                                            var item = docs.item;
                                            for(var i = 0; i < item.length; i++){
                                        %>
                                        <tr id="platform_<%= item[i].pid %>" style="text-align: center">
                                            <td><%= item[i].platformId %></td>
                                            <td><%= item[i].key %></td>
                                            <td><%= item[i].secret %></td>
                                            <td><%= item[i].msg %></td>
                                            <td><%= item[i].url %></td>
                                            <td><%= item[i].admin %></td>
                                            <td><%= item[i].number %></td>
                                            <td class="dropdown avtar-dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                    <i class="icon-settings"></i>
                                                </a>
                                                <ul class="dropdown-menu top-dropdown">
                                                    <li>
                                                        <a href="#" onclick="updateChange(<%= item[i].pid %>);" data-toggle="modal" data-target="#signupModal">修改</a>
                                                        <a href="javascript:remove(<%= item[i].pid %>,'<%= item[i].platformId %>')">删除</a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <% } %>
                                    <% } %>
                                </tbody>
                            </table>
                            <% if(code != 0 || !docs.item.length){ %>
                            <p id="Null" style="text-align: center">暂无对接平台</p>
                            <% } %>
                         </div>
                    </div>
                </div>
            </div><!--end row-->

            <!--end page content-->

            <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="fa fa-times-circle"></span></button>
                            <h3 class="modal-title" id="myModalLabel">添加对接平台</h3>
                        </div>
                        <div class="modal-body">
                            <div class="modal-form">
                                <form role="form" id="form">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="平台名称" disabled="disabled" id="add_pid">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="token密钥" id="add_secret">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6" style="width: 100%;">
                                            <div class="form-group" style="padding-right: 60px;position: relative;">
                                                <input type="text" class="form-control" placeholder="平台密钥" id="add_key">
                                                <span style="display:inline-block;height: 34px;line-height: 34px; position: absolute; right: 0;top: 0; width: 60px;text-align: center;">
                                                    <a href="javascript: createKey();">自动生成</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6" style="width: 100%;">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="通信URL" id="add_url">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6" style="width: 100%;">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="平台简介" id="add_msg">
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="平台负责人" id="add_admin">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="负责人手机号" id="add_number">
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="clearfix">
                                        <button type="button" id="reset" class="btn btn-primary pull-right"  style="margin-left:20px;">重置</button><button class="btn btn-success pull-right" type="submit" id="submit">添加</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--Start footer-->
            <footer class="footer">
                <span>Copyright &copy; 2016. Float</span>
            </footer>
            <!--end footer-->

        </section>
        <!--end main content-->



        <!--Common plugins-->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/pace.min.js"></script><script src="js/jasny-bootstrap.min.js"></script>
        <script src="js/jquery.slimscroll.min.js"></script>
        <script src="js/jquery.nanoscroller.min.js"></script>
        <script src="js/metismenu.min.js"></script>
        <script src="js/float-custom.js"></script>
        <script src="js/footable.all.min.js"></script>
         <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
            // $('.footable').footable();
            $('.footable2').footable();
        });

        // var add = function(){
        //     var name    = $("#add_name").val()
        //     ,   secret  = $("#add_secret").val()
        //     ,   push    = $("#add_push").val();
        //
        //     if(!name){
        //         alert("平台名称不允许为空");
        //         $("#add_name").focus();
        //         return false;
        //     };
        //     if(!secret){
        //         alert("对接密钥不允许为空");
        //         $("#add_secret").focus();
        //         return false;
        //     };
        //     if(!push){
        //         alert("平台密钥不允许为空");
        //         $("#add_push").focus();
        //         return false;
        //     };
        //
        //     $.ajax({
        //         type : "post",
        //         data : {
        //             name : name,
        //             secret : secret,
        //             push : push
        //         },
        //         success : function(data){
        //             $("#signupModal .close").click();
        //             $("#Null").remove();
        //             data = data.docs;
        //             var tr          = $("<tr></tr>")
        //             ,   id          = $("<td style='text-align: center;'></td>").html(data.id).appendTo(tr)
        //             ,   name        = $("<td style='text-align: center;'></td>").html(data.Platform).appendTo(tr)
        //             ,   secret      = $("<td style='text-align: center;'></td>").html(data.secret).appendTo(tr)
        //             ,   push        = $("<td style='text-align: center;'></td>").html(data.url).appendTo(tr)
        //             ,   operation   = $("<td style='text-align: center;' class='dropdown avtar-dropdown'></td>").html('<a href="#" class="dropdown-toggle" data-toggle="dropdown">'+
        //                 '<i class="icon-settings"></i>'+
        //             '</a>'+
        //             '<ul class="dropdown-menu top-dropdown">'+
        //                 '<li>'+
        //                     '<a href="#" data-toggle="modal" data-target="#signupModal">修改</a>'+
        //                     '<a href="#">删除</a>'+
        //                 '</li>'+
        //             '</ul>').appendTo(tr);
        //
        //             tr.prependTo("#table_tbody");
        //
        //             $("#add_name").val("");
        //             $("#add_secret").val("");
        //             $("#add_push").val("");
        //         },
        //         error : function(error){
        //             alert("添加失败，请联系管理员");
        //         }
        //     });
        //     return false;
        // };


        function randomString(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        };

        function createKey(){
            var key = randomString(24);
            $("#add_key").val(key);
        };

        var count = <%= docs.count %>;

        $("#addButton").click(function(){

            $("#add_secret").val("");
            $("#add_key").val("");
            $("#add_url").val("");
            $("#add_msg").val("");
            $("#add_admin").val("");
            $("#add_number").val("");

            $("#myModalLabel").html("添加对接平台");
            $("#submit").html("添加");
            $("#reset").show();
            $("#form").off("submit");
            $("#form").on("submit",add);

            var id      = Math.random().toString(36).substr(2)
            ,   tail    = id[id.length - 1];
            id = id.substring(0, id.length - 1) + count + tail;
            $("#add_pid").val("PID_"+id);
        });

        $("#reset").click(function(){
            $("#add_secret").val("");
            $("#add_key").val("");
            $("#add_url").val("");
            $("#add_msg").val("");
            $("#add_admin").val("");
            $("#add_number").val("");
        });

        var add = function(){
            var status      = false
            ,   platformId  = $("#add_pid")
            ,   secret      = $("#add_secret")
            ,   key         = $("#add_key")
            ,   url         = $("#add_url")
            ,   msg         = $("#add_msg")
            ,   admin       = $("#add_admin")
            ,   number      = $("#add_number");

            if(!secret.val()){
                alert("token密钥不允许为空");
                secret.focus();
            }else if(!key.val()){
                alert("平台密钥不允许为空");
                key.focus();
            }else if(!url.val()){
                alert("通讯URL不允许为空");
                url.focus();
            }else if(!msg.val()){
                alert("平台简介不允许为空");
                msg.focus();
            }else if(!admin.val()){
                alert("平台负责人不允许为空");
                admin.focus();
            }else if(!number.val()){
                alert("负责人手机号不允许为空");
                number.focus();
            }else{

                $.ajax({
                    type : "post",
                    data : {
                        platformId  : platformId.val(),
                        secret      : secret.val(),
                        key         : key.val(),
                        url         : url.val(),
                        msg         : msg.val(),
                        admin       : admin.val(),
                        number      : number.val()
                    },
                    success : function(data){
                        if(data.code)
                            return alert(data.msg);

                        count += 1;

                        data = data.docs;
                        var tr          = $("<tr id='platform_"+ data.pid +"' style='text-align: center;'></tr>")
                        ,   id          = $("<td></td>").html(data.platformId).appendTo(tr)
                        ,   key         = $("<td></td>").html(data.key).appendTo(tr)
                        ,   secret      = $("<td></td>").html(data.secret).appendTo(tr)
                        ,   name        = $("<td></td>").html(data.msg).appendTo(tr)
                        ,   push        = $("<td></td>").html(data.url).appendTo(tr)
                        ,   admin       = $("<td></td>").html(data.admin).appendTo(tr)
                        ,   number      = $("<td></td>").html(data.number).appendTo(tr)
                        ,   operation   = $("<td style='text-align: center;' class='dropdown avtar-dropdown'></td>").html('<a href="#" class="dropdown-toggle" data-toggle="dropdown">'+
                            '<i class="icon-settings"></i>'+
                        '</a>'+
                        '<ul class="dropdown-menu top-dropdown">'+
                            '<li>'+
                                '<a href="#" onclick="updateChange('+ data.pid +')" data-toggle="modal" data-target="#signupModal">修改</a>'+
                                '<a href="javascript:remove('+ data.pid +',\''+ data.platformId +'\')">删除</a>'+
                            '</li>'+
                        '</ul>').appendTo(tr);

                        tr.prependTo("#table_tbody");

                        $("#signupModal .close").click();

                        $("#Null").remove();

                    },
                    error  : function(error){
                        alert("服务器错误，请联系管理员");
                    }
                });

            }

            return status;
        };
        var updateChange = function(pid){
            update.pid = pid;
            var id = "#platform_"+pid;
            $("#myModalLabel").html("修改对接平台");
            $("#submit").html("修改");
            $("#reset").hide();
            $("#form").off("submit");
            $("#form").on("submit",update);
            $("#add_pid").val(
                $(id).find("td").eq(0).html()
            );
            $("#add_secret").val(
                $(id).find("td").eq(2).html()
            );
            $("#add_key").val(
                $(id).find("td").eq(1).html()
            );
            $("#add_url").val(
                $(id).find("td").eq(4).html()
            );
            $("#add_msg").val(
                $(id).find("td").eq(3).html()
            );
            $("#add_admin").val(
                $(id).find("td").eq(5).html()
            );
            $("#add_number").val(
                $(id).find("td").eq(6).html()
            );
        };

        var update = function(){
            var status      = false
            ,   platformId  = $("#add_pid")
            ,   secret      = $("#add_secret")
            ,   key         = $("#add_key")
            ,   url         = $("#add_url")
            ,   msg         = $("#add_msg")
            ,   admin       = $("#add_admin")
            ,   number      = $("#add_number");

            if(!secret.val()){
                alert("token密钥不允许为空");
                secret.focus();
            }else if(!key.val()){
                alert("平台密钥不允许为空");
                key.focus();
            }else if(!url.val()){
                alert("通讯URL不允许为空");
                url.focus();
            }else if(!msg.val()){
                alert("平台简介不允许为空");
                msg.focus();
            }else if(!admin.val()){
                alert("平台负责人不允许为空");
                admin.focus();
            }else if(!number.val()){
                alert("负责人手机号不允许为空");
                number.focus();
            }else{

                $.ajax({
                    type : "put",
                    data : {
                        pid         : update.pid,
                        platformId  : platformId.val(),
                        secret      : secret.val(),
                        key         : key.val(),
                        url         : url.val(),
                        msg         : msg.val(),
                        admin       : admin.val(),
                        number      : number.val()
                    },
                    success : function(data){
                        if(data.code)
                            return alert(data.msg);

                        var id = "#platform_"+update.pid;
                        $(id).find("td").eq(0).html(platformId.val());
                        $(id).find("td").eq(1).html(key.val());
                        $(id).find("td").eq(2).html(secret.val());
                        $(id).find("td").eq(3).html(msg.val());
                        $(id).find("td").eq(4).html(url.val());
                        $(id).find("td").eq(5).html(admin.val());
                        $(id).find("td").eq(6).html(number.val());

                        $("#signupModal .close").click();

                    },
                    error  : function(error){
                        alert("服务器错误，请联系管理员");
                    }
                });

            }

            return status;
        };

        var remove = function(pid,platformId){
            $.ajax({
                type : "delete",
                data : { pid : pid, platformId: platformId },
                success : function(data){
                    if(data.code)
                        return alert(data.msg);

                    count = count - 1;

                    $("#platform_"+ pid).remove();

                    if(count == 0){
                        var isNull = $('<p id="Null" style="text-align: center">暂无对接平台</p>');
                        isNull.appendTo("#panel-body");
                    };
                },
                error : function(error){
                    alert("服务器错误，请联系管理员");
                }
            });
        };

    </script>
    </body>
</html>
